<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<title>Twitter点赞动画</title>
		<style type="text/css">
			.heart {
  width: 100px;
  height: 100px;
  background: url("https://cssanimation.rocks/images/posts/steps/heart.png") no-repeat;
  background-position: 0 0;
  cursor: pointer;
  -webkit-transition: background-position 1s steps(28);
  transition: background-position 1s steps(28);
  -webkit-transition-duration: 0s;
          transition-duration: 0s;
}
.heart.is-active {
  -webkit-transition-duration: 1s;
          transition-duration: 1s;
  background-position: -2800px 0;
}

body {
  background: -webkit-linear-gradient(315deg, #121721 0%, #000000 100%) fixed;
  background: linear-gradient(135deg, #121721 0%, #000000 100%) fixed;
  color: #FFF;
  font: 300 16px/1.5 "Open Sans", sans-serif;
}

.stage {
  position: fixed;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

		</style>
	</head>
	<body>
		<div class="stage">
  <div class="heart"></div>
</div>
<script src="../js/jquery-1.11.2.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	$(function() {
  $(".heart").on("click", function() {
    $(this).toggleClass("is-active");
  });
});
</script>
	</body>
</html>
